<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/stylesheets/main.css">
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.staticfile.org/bootstrap-icons/1.10.3/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/axios/1.3.4/axios.min.js"></script>
    <script src="/javascripts/common.js"></script>
</head>
<body>
<div class="container">
    <div class="module">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <h3 class="border-bottom border-3 border-danger playlist-category" style="padding: 5px">
                    <span class="playlist-category-name">全部</span>
                    <a type="button" class="btn btn-outline-secondary btn-sm playlist-category-button"
                       data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">选择分类<i
                            class="bi bi-chevron-right"></i></a>
                </h3>
            </div>
        </div>
        <div class="row" style="margin-top:20px">
            <div class="col-md-10 offset-md-1">
                <div class="row">
                    <div class="col-md-6 mt-2">
                        <div class="row">
                            <div id="totalplaylist-playlist-1" class="col-4 playlist-all">
                            </div>
                            <div id="totalplaylist-playlist-2" class="col-4 playlist-all">
                            </div>
                            <div id="totalplaylist-playlist-3" class="col-4 playlist-all">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-2">
                        <div class="row">
                            <div id="totalplaylist-playlist-4" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-5" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-6" class="col-4 playlist-all">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mt-2">
                        <div class="row">
                            <div id="totalplaylist-playlist-7" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-8" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-9" class="col-4 playlist-all">

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-2">
                        <div class="row">
                            <div id="totalplaylist-playlist-10" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-11" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-12" class="col-4 playlist-all">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mt-2">
                        <div class="row">
                            <div id="totalplaylist-playlist-13" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-14" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-15" class="col-4 playlist-all">

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mt-2">
                        <div class="row">
                            <div id="totalplaylist-playlist-16" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-17" class="col-4 playlist-all">

                            </div>
                            <div id="totalplaylist-playlist-18" class="col-4 playlist-all">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:20px">
            <div class="col-md-10 offset-md-1 text-center">
                <button type="button" class="btn btn-sm btn-outline-secondary mx-3 previousPage">上一页</button>
                <span class="page-now-number">1</span>
                <button type="button" class="btn btn-sm btn-outline-secondary mx-3 nextPage">下一页</button>
            </div>
        </div>
    </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" data-bs-backdrop="false"
     aria-labelledby="offcanvasLeftLabel">
    <div class="offcanvas-header">
        <h4 id="offcanvasLeftLabel">分类</h4>
        <button type="button" class="btn-close text-reset" id="closeButton" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
    </div>
    <hr>
    <div class="offcanvas-body" id="playlistcat-body">
        <div>
            <h6 class="mt-3">#语种#</h6>
            <div>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">华语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">欧美</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">日语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
            </div>
        </div>
        <div>
            <h6 class="mt-3">#语种#</h6>
            <div>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">华语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">欧美</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">日语</button>
            </div>
        </div>
        <div>
            <h6 class="mt-3">#语种#</h6>
            <div>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">华语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">欧美</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">日语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
                <button type="button" class="btn btn-outline-secondary btn-sm mx-2 mt-2">韩语</button>
            </div>
        </div>
    </div>
</div>
<div class="offcanvas-msk"></div>
<script src="/javascripts/playlist.js"></script>
</body>
</html>
